<template>
  <div class="order-comment">
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader">
        <span class="order-comment-right-btn" slot="right" @click="onRelease">发布</span>
      </XHeader>
    </div>

    <!--提交内容-->
    <div class="order-comment-con">
      <div class="bak-fff">
        <div class="order-comment-con-goods pad-12">
          <div class="order-comment-con-goods-img">
            <img :src="goods_image">
          </div>
          <div class="order-comment-con-goods-start">
            <rater :fontSize="35" v-model="form.comment_starts"></rater>
          </div>
        </div>

        <div class="order-comment-con-desc pad-12">
          <textarea placeholder="描述" v-model="form.comment_content" @focusout="inputBlur" @focusin="inputFocus"></textarea>
        </div>

        <div class="order-comment-con-uploader pad-12">
          <!--          <uploader-->
          <!--            :max="8"-->
          <!--            :images="form.comment_imgs"-->
          <!--            :handle-click="true"-->
          <!--            :show-header="false"-->
          <!--            :upload-url="uploadUrl"-->
          <!--            name="img"-->
          <!--            :params="params"-->
          <!--            @preview="previewMethod"-->
          <!--            @add-image="addImageMethod"-->
          <!--            @remove-image="removeImageMethod"-->
          <!--          ></uploader>-->
          <div style="background-color: #fff;">
            <div class="upimagebox">
              <div v-for="(item,index) in images" :key="index" class="upimage delete-img">
                <chimage class="image" :src="item.base64Url"></chimage>
                <span class="delete-icon" @click="onDeleteImg(index)">x</span>
              </div>
              <div class="upimage">
                <label class="addfile">
                  <input type="file" @change="onImageSelect" accept=".png,.jpg,jpeg">
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--是否匿名-->
      <div class="order-comment-anonymous pad-12 bak-fff">
        <checker v-model="form.is_anonymous" :max="2" type="radio" default-item-class="anonymous-default"
                 selected-item-class="anonymous-selected">
          <checker-item value="1"></checker-item>
        </checker>
        <span class="order-comment-anonymous-text">匿名评价</span>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'

  export default {
    name: 'mallOrderComment',
    data () {
      return {
        xheader: {
          title: '发表评论'
        },
        uploadUrl: '',
        form: {
          order_id: this.$route.query.order_id,
          goods_sku: this.$route.query.goods_sku,
          comment_starts: 0, // 评论星级
          comment_content: '', // 评论内容
          comment_imgs: [], // 图片地址
          is_anonymous: 0 // 是否匿名评论
        },
        goods_image: this.$route.query.goods_image,
        params: {},
        images: []
      }
    },
    methods: {
      previewMethod () {
      },
      addImageMethod () {
      },
      removeImageMethod () {
      },

      onImageSelect (e) {
        if (this.images.length >= 8) {
          this.$vux.toast.text('最多只能上传八张图片')
          return
        }
        var files = e.target.files || e.dataTransfer.files
        var imageType = /^image\//
        if (!files.length) return
        if (!imageType.test(files[0].type)) {
          e.target.value = ''
          return
        }
        var reader = new FileReader()
        reader.onload = re => {
          this.images.push({
            file: files[0],
            base64Url: re.target.result
          })
          e.target.value = ''
        }
        reader.readAsDataURL(files[0])
      },

      // 删除图片
      onDeleteImg (index) {
        this.images.splice(index, 1)
      },

      async submitImg () {
        let upimages = true
        let upImagesUrl = []
        let resImage
        for (let i in this.images) {
          resImage = await Me.MallOrderAfterApplyImageUpload([
            this.images[i].file
          ])
          if (resImage.code == 0) {
            upImagesUrl.push(resImage.data.filePath)
          } else {
            upimages = false
            break
          }
        }
        if (!upimages) {
          this.$vux.alert.show({
            title: '提示',
            content: '提交失败请稍后重试'
          })
          return
        }
        if (upImagesUrl.length) {
          // upImagesUrl = upImagesUrl.join(',')

          this.form.comment_imgs = JSON.stringify(upImagesUrl)
        }
      },

      async onRelease () { // 发布
        if (!this.form.comment_starts) {
          this.$vux.toast.text('请选择评论星级')
          return
        }
        if (!this.form.comment_content) {
          this.$vux.toast.text('请输入评论内容')
          return
        }
        this.$vux.loading.show()
        await this.submitImg()
        let res = await Me.submitComment(this.form)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$vux.toast.text('评论成功')
          this.$router.go(-1)
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      }
    }
  }
</script>

<style lang="less">

  * {
    box-sizing: border-box;
  }

  .order-comment {
    .order-comment-right-btn {
      color: #B0290F;
    }

    .bak-fff {
      background: #fff;
    }

    .pad-12 {
      padding: 12px;
    }

    .order-comment-con {
      padding: 12px;

      .order-comment-con-goods {
        display: flex;

        .order-comment-con-goods-img {
          img {
            width: 100px;
            height: 100px;
            margin-right: 14px;
            flex-shrink: 0;
          }
        }

        .order-comment-con-goods-start {
          display: flex;
          flex-shrink: 0;
          align-items: center;
        }
      }

      .order-comment-con-desc textarea {
        display: block;
        font-size: 13px;
        resize: none;
        height: 100px;
        width: 100%;
        border: 1px solid #F1EDEC;
        padding: 13px 12px;
        color: #351009;
        box-sizing: border-box;
      }

      .order-comment-con-uploader {
        .weui-uploader__input-box:after {
          width: 30px;
        }

        .weui-uploader__input-box:before {
          height: 30px;
        }

        .weui-uploader__input-box:before, .weui-uploader__input-box:after {
          background-color: #b0290f;
        }
      }

      .order-comment-anonymous {
        display: flex;
        align-items: center;
        border-top: 5px solid #fbf8f7;

        .anonymous-default {
          width: 26px;
          height: 26px;
          border: 1px solid #ccc;
          display: inline-block;
          border-radius: 50%;
          line-height: 40px;
          text-align: center;
        }

        .anonymous-selected {
          border: 1px solid #43cc19;
          position: relative;
        }

        .anonymous-selected:before, .anonymous-selected:after {
          content: '';
          pointer-events: none;
          position: absolute;
          color: #bfb7b7;
          border: 1px solid;
          background-color: #bfb7b7;
        }

        .anonymous-selected:before {
          width: 1px;
          height: 1px;
          left: 29%;
          top: 50%;
          transform: skew(0deg, 50deg);
        }

        .anonymous-selected:after {
          width: 5px;
          height: 1px;
          left: 42%;
          top: 42%;
          transform: skew(0deg, -50deg);
        }

        /*.anonymous-selected:after {*/
        /*  content: '√';*/
        /*  display: block;*/
        /*  !*position: absolute;*!*/
        /*  width: 26px;*/
        /*  height: 26px;*/
        /*  line-height: 26px;*/
        /*}*/

        .order-comment-anonymous-text {
          margin-left: 10px;
        }
      }
    }
  }

  .upimagebox {
    display: flex;
    flex-wrap: wrap;

    .upimage {
      border: 1px solid #f1edec;
      margin: 0 5px 5px 0;
      font-size: 0;

      .image {
        width: 70px;
        height: 70px;
        background-size: cover;
      }

      .addfile {
        width: 64px;
        height: 64px;
        display: block;
        background-image: url("../../../../assets/img/add_image.png");
        background-position: center;
        background-repeat: no-repeat;

        input {
          visibility: hidden;
          display: none;
        }
      }
    }

    .delete-img {
      position: relative;

      .delete-icon {
        position: absolute;
        color: red;
        font-size: 19px;
        top: 0;
        right: 0;
        background: #fff;
        width: 18px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
